<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial=" initial-scale=1.0">
  <title>教学班管理 - 管理员面板</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="navbar">
    <div class="logo">AdminPanel</div>
    <h1>管理员控制面板</h1>
    <div class="user-info">
      <img src="/img/admin-avatar.jpg" alt="Admin Avatar" class="avatar">
      <span>管理员</span>
      <button class="logout-btn" id="logout-btn">退出</button>
    </div>
  </header>

  <aside class="sidebar">
    <ul>
      <li><a href="index.html">工作首页</a></li>
      <li><a href="activity.html">活动管理</a></li>
      <li><a href="class.html">教学班管理</a></li>
      <li><a href="student.html">学员管理</a></li>
      <li><a href="teacher.html">教师管理</a></li>
    </ul>
  </aside>

  <main>
  <section class="class-management">
    <h2>教学班管理</h2>
    <div class="button-container">
      <input type="text" id="searchInput" placeholder="搜索班级" />
      <button id="searchBtn">搜索</button>
      <button onclick="openModal('create')" id="createClassBtn">新增教学班</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>班级ID</th>
          <th>班级名称</th>
          <th>创建时间</th>
          <th>班级描述</th>
          <th>教师</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="classTableBody">
        <!-- 动态生成班级数据 -->
      </tbody>
    </table>
  </section>
</main>



  <!-- 弹窗 -->
  <div id="classModal" class="modal">
    <div class="modal-content">
      <h3 id="modal-title">新增教学班</h3>
      <form id="class-form">
        <label for="className">班级名称</label>
		<input type="text" id="className" name="className" required>
		<label for="classDescription">班级描述</label>
		<input type="text" id="classDescription" name="classDescription">
		<label for="teacherName">教师</label>
		<input type="text" id="teacherName" name="teacherName">
        <div class="button-container">
          <button type="submit" id="save-btn">保存</button>
          <button type="button" id="cancel-btn">取消</button>
        </div>
      </form>
    </div>
  </div>

  <footer class="footer">
    <p>© 2024 AdminPanel, All Rights Reserved</p>
    <a href="/help">帮助</a> | <a href="/contact">联系我们</a>
  </footer>

  <script src="class.js"></script>
</body>
</html>
